<template>
	<div id="title">
		<div class="title-div">
			<p id="title-div-p1"  :style="Bo" @click="change1">搜商品</p>
		</div>
		<div class="title-div">
			<p id="title-div-p2" :style="Do" @click="change2">搜商铺</p>
		</div>
	</div>
</template>

<script>
	export default{
		name: "title-div",
		data(){
			return{
				Bo: "border-bottom: 0.01rem solid #ff6600;color: #ff6600",
				Do: "border-bottom: none;color: black"
			}
		},
		methods:{
			change1(){
				this.Bo = "border-bottom: 0.01rem solid #ff6600;color: #ff6600",
				this.Do = "border-bottom: none;color: black"
			},
			change2(){
				this.Bo = "border-bottom: none;color: black",
				this.Do = "border-bottom: 0.01rem solid #ff6600;color: #ff6600"
			}
		}
	}
</script>

<style scoped>
	#title{
		width: 100%;
		height: 0.51rem;
		border-bottom: 0.01rem solid #eaeaea;
		display: flex;
		/* margin-top: 0.46rem; */
	}
	.title-div{
		width: 2.07rem;
		height: 0.51rem;
	}
	#title-div-p1,#title-div-p2{
		width: 0.58rem;
		height: 0.5rem;
		font-size: 0.16rem;
		line-height: 0.5rem;
		margin: auto;
		text-align: center;
	}
	#title-div-p2{
		color: black;
		border-bottom: none;
	}
	
</style>
